<template>
  <div style="padding-left: 20px">
    <!-- 搜索工作栏 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="searchForm.showSearch"
    >
      <div class="search-condition">
        <template v-for="item in searchForm.search">
          <el-form-item :label="item.labelName" :prop="item.prop">
            <!-- text -->
            <el-input
              v-if="item.type == 'text'"
              v-model="queryParams[item.prop]"
              :placeholder="item.placeholder"
              clearable
              @keyup.enter.native="item.clickFun"
            />
            <!-- number -->
            <el-input
              v-if="item.type == 'number'"
              type="tel"
              v-model.number="queryParams[item.prop]"
              :placeholder="item.placeholder"
              clearable
              @keyup.enter.native="item.clickFun"
              @input="
                queryParams[item.prop] = String(queryParams[item.prop]).replace(
                  /[^\d]/g,
                  ''
                )
              "
            />
            <!-- 日期范围 yyyy-MM-dd HH:mm:ss-->
            <el-date-picker
              v-if="item.type == 'daterange'"
              v-model="queryParams[item.prop]"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              :start-placeholder="item.startPlaceholder"
              :end-placeholder="item.endPlaceholder"
              :default-time="['00:00:00', '23:59:59']"
            />
            <!-- 日期范围 年月日-->
            <el-date-picker
              v-model="queryParams[item.prop]"
              v-if="item.type == 'danxuan'"
              type="date"
              :picker-options="pickerOptionsone"
              range-separator="-"
              @change="item.clickFun"
              :placeholder="item.placeholder"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <!-- 时 -->
            <el-time-picker
              v-if="item.type == 'hours'"
              is-range
              v-model="queryParams[item.prop]"
              value-format="HH:mm"
              format="HH:mm"
              range-separator="-"
              :start-placeholder="item.startPlaceholder"
              :end-placeholder="item.endPlaceholder"
              style="width: 260px"
              @change="item.clickFun"
            >
            </el-time-picker>
            <!-- 年月日时分，当前之后的时间禁选 -->
            <el-date-picker
              v-if="item.type == 'ymdhm'"
              v-model="queryParams[item.prop]"
              :picker-options="pickerOptionsone"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              range-separator="-"
              :start-placeholder="item.startPlaceholder"
              :end-placeholder="item.endPlaceholder"
              style="width: 260px"
            >
            </el-date-picker>

            <!-- 日期范围 yyyy-MM-dd-->
            <el-date-picker
              v-if="item.type == 'yyyymmdd'"
              v-model="queryParams[item.prop]"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="item.startPlaceholder"
              :end-placeholder="item.endPlaceholder"
              :default-time="['00:00:00', '23:59:59']"
            />

            <!-- 日期范围 yyyy-MM-ddx时间范围选中五天内-->
            <el-date-picker
              v-if="item.type == 'timehorizon'"
              v-model="queryParams[item.prop]"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="item.startPlaceholder"
              :picker-options="pickerOptions"
              :end-placeholder="item.endPlaceholder"
              :default-time="['00:00:00', '23:59:59']"
            />
            <!-- 日期范围 yyyy-MM时间范围设置第二个选择时间小于第一个选择时间-->
            <el-date-picker
              v-if="item.type == 'months'"
              v-model="queryParams[item.prop]"
              type="monthrange"
              range-separator="至"
              @change="item.clickFun"
              :start-placeholder="item.startPlaceholder"
              :end-placeholder="item.endPlaceholder"
            >
            </el-date-picker>

            <!-- 月 -->
            <el-date-picker
              v-if="item.type == 'month'"
              v-model="queryParams[item.prop]"
              type="month"
              format="yyyy-MM"
              :placeholder="item.placeholder"
              value-format="yyyy-MM"
            ></el-date-picker>
            <!-- 年月yyyymm -->
            <el-date-picker
              v-if="item.type == 'Ymonth'"
              v-model="queryParams[item.prop]"
              type="month"
              :placeholder="item.placeholder"
              value-format="yyyyMM"
            ></el-date-picker>
            <el-date-picker
              v-if="item.type == 'monthtwo'"
              v-model="queryParams[item.prop]"
              type="month"
              format="yyyy-MM"
              :placeholder="item.placeholder"
              value-format="yyyy-MM"
            ></el-date-picker>
            <!-- 年月日 -->
            <el-date-picker
              v-if="item.type == 'date'"
              v-model="queryParams[item.prop]"
              type="date"
              :placeholder="item.placeholder"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <!-- 下拉框 -->

            <template v-if="item.type == 'select' && item.clickFun">
              <el-select
                v-model="queryParams[item.prop]"
                :placeholder="item.placeholder"
                clearable
                size="small"
              >
                <el-option
                  v-for="temp in item.selectList"
                  :key="temp[item.id]"
                  :label="temp[item.label]"
                  :value="temp[item.value]"
                  @click.native="item.clickFun(temp)"
                />
              </el-select>
            </template>
            <template v-else>
              <el-select
                v-if="item.type == 'select'"
                v-model="queryParams[item.prop]"
                :placeholder="item.placeholder"
                clearable
                size="small"
              >
                <el-option
                  v-for="temp in item.selectList"
                  :key="temp[item.id]"
                  :label="temp[item.label]"
                  :value="temp[item.value]"
                />
              </el-select>
            </template>
            <el-checkbox
              v-if="item.type == 'checkbox'"
              v-model="queryParams[item.prop]"
              >{{ item.placeholder }}</el-checkbox
            >
          </el-form-item>
        </template>
        <el-form-item>
          <!-- 有搜索条件显示搜索,重置按钮 -->
          <template v-if="searchForm.search">
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button type="reset" @click="resetQuery">重置</el-button>
          </template>
        </el-form-item>
      </div>
      <div class="search-operation">
        <el-form-item>
          <template v-for="(item, index) in searchForm.searchBtn">
            <el-button
              v-if="item.type == 'print'"
              v-print="item.print"
              :icon="item.icon"
              @click="item.clickFun"
              v-hasPermi="item.hasPermi"
              >{{ item.name }}</el-button
            >
            <el-button
              v-else
              :type="item.type"
              :icon="item.icon"
              @click="item.clickFun"
              v-hasPermi="item.hasPermi"
              >{{ item.name }}</el-button
            >
          </template>
          <!-- <el-button v-for="(item, index) in searchForm.operationBtn" :type="item.type" :key="item.name + index" plain
            :icon="item.icon" size="mini" @click="item.clickFun" v-hasPermi="item.hasPermi">{{ item.name }}</el-button> -->
          <!-- <div
            v-for="(item, index) in searchForm.operationBtn"
            :type="item.type"
            :key="item.name + index"
            plain
            :icon="item.icon"
            size="mini"
            @click="item.clickFun"
            v-hasPermi="item.hasPermi"
            :class="item.type"
          >
            <svg
              v-if="item.icon == 'icon-daochu'"
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-daochu"></use>
            </svg>

            <svg
              v-if="item.icon == 'icon-daoru'"
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-daoru"></use>
            </svg>

            <svg
              v-if="item.icon == 'jiesuandan'"
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-jiesuandanshengcheng"></use>
            </svg>
            <svg v-if="item.icon == 'chaifen'" class="icon" aria-hidden="true">
              <use xlink:href="#icon-chaifen"></use>
            </svg>

            <svg v-if="item.icon == 'dayin1'" class="icon" aria-hidden="true">
              <use xlink:href="#icon-dayin1"></use>
            </svg>

            <p>{{ item.name }}</p>
          </div> -->
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    queryParams: {
      type: Object,
    },
    searchForm: {
      // 显示搜索条件
      showSearch: {
        type: Boolean,
        default: true,
      },
      // 高级搜索
      advanced: {
        type: Boolean,
        default: false,
      },
      //搜索条件
      search: {
        type: Array,
      },
      // 按钮
      searchBtn: {
        type: Array,
      },
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          let _now = Date.now();
          let seven = 5 * 24 * 60 * 60 * 1000;
          let sevenDays = _now - seven;
          return time.getTime() < sevenDays;
        },
      },

      pickerOptionsone: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.queryParams.pageNo) {
        this.queryParams.pageNo = 1;
      }
      this.searchForm.queryTable();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 高级搜索
    advanced() {
      this.$emit("advanced");
    },
  },
};
</script>
<style scoped lang="scss">
.search-form {
  display: flex;
  justify-content: space-between;
}

::v-deep .el-form--inline {
  display: flex !important;
  justify-content: space-between;
  padding-right: 10px;
}

::v-deep .search-operation .el-form-item--small .el-form-item__content {
  display: flex;
}

::v-deep .el-form-item--small .el-form-item__label {
  line-height: 32px;
  padding-left: 10px;
}

.icon {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

// 导出
.export {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #c9ccd5;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  cursor: pointer;
  margin: 0px 10px;
}
// 导出
.export1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #c9ccd5;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  cursor: pointer;
  margin: 0px 10px;
}

// 导入
.info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #c9ccd5;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  cursor: pointer;
  // margin: 0px 10px;
  margin-left: 10px;
}
.primary1 {
  width: 136px;
  height: 32px;
  background: #3b7df5;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  margin: 0px 10px;
}
// 新增
.primary {
  width: 80px;
  height: 32px;
  background: #3b7df5;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  margin: 0px 10px;
}

.final {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #c9ccd5;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  margin: 0px 10px;
  cursor: pointer;
}

p {
  margin: 0px;
}
.advanced {
  width: 57px;
  height: 13px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #3b7df5;
}
</style>
